<template>
  <Header :title="movie_types[type]" />
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="getMore"
  >
    <div class="page-body">
      <Movie v-for="(item, index) in movies" :movie="item" :key="index" />
    </div>
  </van-list>
</template>
<script>
import { defineComponent, inject } from "vue";
import { List } from "vant";
import Movie from "../components/Movie";
import Header from "@/components/Header";
import { moviePagination } from "../utils/movie";
export default defineComponent({
  name: "App",
  components: {
    Header,
    Movie,
    [List.name]: List,
  },
  props: ["type"],
  setup(props) {
    console.log(props);
    const movie_types = inject("movie_types");
    return {
      movie_types,
      ...moviePagination(props.type),
    };
  },
});
</script>

<style scoped>
.page-body {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
}
</style>